<!--
 * @Author: Easycome 2684545336@qq.com
 * @Date: 2025-03-19 19:26:40
 * @LastEditors: Easycome 2684545336@qq.com
 * @LastEditTime: 2025-04-18 23:02:53
 * @FilePath: \yupao-frontend-master\src\pages\UserAboutPage.vue
 * @Description: 关于我们页面
-->
<template>
  <div class="about-page">
    <div class="logo-container">
      <img src="/src/assets/images/logo.png" alt="伙伴匹配系统" class="logo" />
      <h1 class="app-name">伙伴匹配系统</h1>
      <div class="version">版本号：1.0.0</div>
    </div>
    
    <van-cell-group inset>
      <van-cell title="用户协议" is-link to="/user/agreement" />
      <van-cell title="隐私政策" is-link to="/user/privacy" />
      <van-cell title="联系我们" is-link @click="copyEmail" />
      <van-cell title="版权信息" :value="'© ' + new Date().getFullYear() + ' 伙伴匹配'" />
    </van-cell-group>
    
    <div class="about-content">
      <h2>关于伙伴匹配系统</h2>
      <p>伙伴匹配系统是一个致力于帮助用户找到志同道合伙伴的平台。无论是学习、工作、生活，还是兴趣爱好，我们都希望能够让用户找到合适的伙伴，共同成长，共同进步。</p>
      
      <h2>我们的使命</h2>
      <p>连接每一个有需求的人，让社交变得更有价值。</p>
      
      <h2>我们的愿景</h2>
      <p>成为最受用户信赖的伙伴匹配平台，让每个人都能找到志同道合的伙伴。</p>
      
      <h2>团队介绍</h2>
      <p>我们是一支充满热情的团队，由一群有梦想、有激情的年轻人组成。我们致力于打造一个安全、高效、便捷的伙伴匹配平台，让用户能够轻松找到合适的伙伴。</p>
    </div>
    
    <div class="footer">
      <p>感谢您的使用与支持</p>
    </div>
  </div>
</template>

<script setup>
import { showSuccessToast } from 'vant';

const copyEmail = () => {
  const email = 'support@yupaomatch.com';
  navigator.clipboard.writeText(email)
    .then(() => {
      showSuccessToast('邮箱已复制：' + email);
    })
    .catch(() => {
      showSuccessToast('联系邮箱：' + email);
    });
};
</script>

<style scoped>
.about-page {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  margin-bottom: 16px;
}

.app-name {
  font-size: 24px;
  font-weight: bold;
  color: #323233;
  margin: 0 0 8px;
}

.version {
  font-size: 14px;
  color: #969799;
  margin-bottom: 8px;
}

.about-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.about-content h2 {
  font-size: 18px;
  color: #323233;
  margin: 16px 0 8px;
}

.about-content p {
  font-size: 14px;
  color: #646566;
  line-height: 1.5;
  margin-bottom: 16px;
}

.footer {
  text-align: center;
  padding: 16px;
  color: #969799;
  font-size: 12px;
}
</style>
